<meta charset="UTF-8">
<style>
    html{
background-color: #000;
    }
    .xuetiao {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 50px;
    border: solid 5px yellow;
}
.xuetiao span {

    height: 50px;
    background-color: red;
    display: block;
}
</style>

<body>
    <div class="xuetiao">
        <span style=" width: 100px;">血量</span>
    </div>

</body>


<script>
    function sj(min,max){
            return Math.floor(Math.random()*(max-min+1)+min)
    }
    
    var tp =function (){
        var imgobj= document.createElement('img')
        imgobj.src="star.gif"
        imgobj.width=sj(50,100)
        imgobj.height=sj(50,100)
        imgobj.style.position='absolute'
        imgobj.style.left=sj(0,(window.innerWidth || document.documentElement.clientWidth)-imgobj.width)+'px'
        imgobj.style.top=sj(0,(window.innerWidth || document.documentElement.clientWidth)-imgobj.height)+'px'
        document.body.appendChild(imgobj)
    }
    var num=0
    var t=setInterval(function(){
        tp()
        num = parseInt(document.querySelector('div span').style.width)
        num-=10
        document.querySelector('span').style.width = num+'px' 
        if (parseInt(document.querySelector('div span').style.width)<=0) {
            alert('李梅志垃圾')
            clearInterval(t)
        }
    },1000)
    
    
    document.onclick = function(evt) {
        var e=evt||window.event
        var target = e.target || e.srcElement
        num+=10
        if (target.nodeName === 'IMG'){
            document.body.removeChild(target)   
            document.querySelector('span').style.width=num+"px"
            
        }
        
    }
    
    // setInterval(function(){
    //     var num = parseFloat(document.querySelector('div span').style.width)
    //     num-=10
    //     document.querySelector('span').style.width = num+'px' 
    // },1000)
</script>